<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/modules/woms/front/include/import-tags.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=BeY8aos6O4vcCZ5luec9NsHCfrScUwk2"></script>
    <title>服务订单详情</title>
    <link href="${ctxStatic}/css/main.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/style.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/animate.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${ctxStatic}/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/js/wo.js"></script>
    <style>
        #allmap {
            /*百度地图*/
            width:99%;
            height:220px;
            text-align:center;
        }
    </style>
</head>

<body>
<div class="warpe">
    <c:choose>
        <c:when test="${event.delFlag ne '0'}">
            <br/>
            <center><h2>工单已删除</h2></center>
        </c:when>
        <c:otherwise>

    <div class="head">
        工单详情
        <a href="#" class="return icon-chevron-left"></a>
    </div>
    <div class="con">
        <div class="gdTxt">工单编号：${event.id }</div>
    </div>
    <div class="main">
        <div class="u_head">
            <p>
                <span class="puff_left"><img src="${event.assigner.headImg}"> ${event.assigner.name}</span>
                <span class="puff_right color_g2"><i class="icon-phone color_g"></i>  <a href="tel:${event.assigner.mobile}">${event.assigner.mobile}</a></span>
            </p>
        </div>
        <div class="banner" id="allmap">

        </div>
        <div class="xq_txt">
            <div class="x_list">
                <ul>
                    <li class="clear_border">
                        <p><span>故障详情</span></p>
                        <p>故障类型：${fns:getDictLabel(event.faultType, 'fault_type', '')}</p>
                        <p>信息设备：${event.deviceName}</p>
                        <p>传输类型：${event.transType}</p>
                        <p>网络路由：${event.route}</p>
                        <p>取电位置：${event.powerPosition}</p>
                        <p>安装位置：${event.installPosition} </p>
                        <p>ip地址：${event.ip}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <c:if test="${not empty event.faultPic}">
        <div class="main" style="margin-top: 1rem; padding: 0rem;">
            <div class="upload clear_border">
                <div><b>故障图片</b></div>
                <ul data-am-widget="gallery" class="am-gallery am-gallery-overlay" data-am-gallery="{ pureview: true }">
                    <li class="margin_left upload_bth">
                        <img src="${fns:getConfig('projectUrl')}${event.faultPic}">
                    </li>
                </ul>
            </div>
        </div>
    </c:if>

    <c:if test="${event.status eq '2'}">
        <div class="main">
            <div class="work_bth">
                <a href="${ctx}/engineer/receiveUI?id=${event.id}" target="_top" class="ui-link">接收故障</a>
            </div>
        </div>
    </c:if>
    <c:if test="${event.status eq '3'||event.status eq '4'||event.status eq '6'}">
        <div class="main">
            <div class="work_bth">
                <a href="${ctx}/engineer/processUI?id=${event.id}" target="_top" class="ui-link">继续处理</a>
            </div>
        </div>
    </c:if>
    <c:if test="${event.status eq '7'}">
        <div class="main">
            <div class="work_bth">
                <a href="#process" target="_top" class="ui-link">工单已确认处理完成</a>
            </div>
        </div>
    </c:if>
    <c:if test="${event.status eq '5'}">
        <div class="main">
            <div class="work_bth">
                <a href="#process" target="_top" class="ui-link">工单已处理完成</a>
            </div>
        </div>
    </c:if>

        <div class="main" id="process" style="margin-top: 1rem;">
            <div class="a_input">
                <label class="puff_left">处置明细</label>
            </div>
            <c:forEach items="${event.processList}" var="process">
                <div class="czlist">
                    <ul>
                        <li>
                            <div class="czlist_t"><i class=" icon-double-angle-right"></i>
                                <fmt:formatDate value="${process.createDate}" pattern="yyyy-MM-dd HH:mm:ss" />&nbsp;&nbsp;${fns:getDictLabel(process.status, 'event_status', '')}
                            </div>
                            <div class="czlist_m">
                                <p>处理人：${process.worker.name} &nbsp;&nbsp;手机：<a href="tel:${process.worker.mobile}">${process.worker.mobile}</a></p>
                                <p>${process.content}</p>
                            </div>
                            <c:if test="${not empty process.eventPicList}">
                                <div class="czlist_b">
                                    <ul data-am-widget="gallery" class="am-gallery am-gallery-overlay" data-am-gallery="{ pureview: true }">
                                        <c:forEach items="${process.eventPicList}" var="eventPic">
                                            <li class="margin_left upload_bth">
                                                <a href=""><img src="${fns:getConfig('projectUrl')}${eventPic.pic}" /></a>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </c:if>
                        </li>
                    </ul>
                </div>
            </c:forEach>
        </div>
</div>

</c:otherwise>
</c:choose>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">
    var url=location.href.split('#')[0];
    var result =false;
    $.ajax({
        type : "POST",
        url : "${ctx}/assigner/jsApi?t="+Date.parse(new Date()),
        cache : false,
        dataType : "json",
        async: false,
        data:{url:url},
        success : function(data) {
            result= true;
            if(data.success){
                result = JSON.parse(data.msg);
                init();

            }

        }
    });

    function init(){
        if(result && wx){
            wx.config({
                debug: false,
                appId:  'wx3a0b5ce9478e1365',
                timestamp: result['timestamp'],
                nonceStr: result['nonceStr'],
                signature: result['signature'],
                jsApiList: [
                    'checkJsApi',
                    'chooseImage',
                    'uploadImage'
                ]
            });
            wx.ready(function () {
                layer.close(loading);
            });
            wx.error(function (res) {
                //alert('wx.error: '+JSON.stringify(res));
                //init();
                window.location.href = "https://bsbx.jpclouds.cn/f/engineer/event2?id=${event.id}";
            });
        }else{
            setTimeout(function(){
                init();
            },1000)
        }
    }

    function openLocation() {
        wx.openLocation({
            latitude: ${event.latitude}, // 纬度，浮点数，范围为90 ~ -90
            longitude: ${event.longitude}, // 经度，浮点数，范围为180 ~ -180。
            name: '', // 位置名
            address: '${event.address}', // 地址详情说明
            scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
    }


    //百度地图API功能
    var longitude='${event.longitude}';
    var latitude='${event.latitude}';
    var point;
    if(longitude&&latitude){
        point = new BMap.Point(longitude,latitude);
    }else{
        longitude = "113.528197";
        latitude = "23.17543509"
        point = new BMap.Point(longitude,latitude);
    }
    var map = new BMap.Map("allmap");
    var marker = new BMap.Marker(point);// 创建标注
    map.addOverlay(marker);         // 将标注添加到地图中
    map.centerAndZoom(point,16);
    var label=new BMap.Label("${event.installPosition}",{offset:new BMap.Size(10,-10)});
    marker.setLabel(label);
    //marker.addEventListener("click",openLocation);
    map.addEventListener("click",openLocation);



</script>



<!--相册放大预览必要文件-->
<link rel="stylesheet" href="${ctxStatic}/css/amazeui.min.css" />
<script src="${ctxStatic}/js/amazeui.js"></script>
</body>
</html>
